<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link href="/ajax/libs/jquery-layout/jquery.layout-latest.css"
	th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}"
	rel="stylesheet" />
<link href="/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css"
	th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}"
	rel="stylesheet" />

<body class="gray-bg">


	<div class="ibox-content">
		<div class="ibox-title">
			<h4>基础信息</h4>
		</div>
		<div class="ibox-content">


			<div class="row">
				<div class="col-sm-5">
					<dl class="dl-horizontal">
						<dt>SN号：</dt>
						<dd id='sn'></dd>
						<dt>最近在线时间：</dt>
						<dd id="onlineTime"></dd>
						<dt>Agent版本：</dt>
						<dd id="agentVersion"></dd>
					</dl>
				</div>
				<div class="col-sm-7">
					<dl class="dl-horizontal">
						<dt>状态：</dt>
						<dd id='status'></dd>
						<dt>系统：</dt>
						<dd id="os"></dd>
						<dt>型号：</dt>
						<dd id="model"></dd>
					</dl>
				</div>
			</div>

		</div>
	</div>
	
	
	<div class="ibox-content">
		<div class="ibox-title">
			<h4>Pop信息</h4>
		</div>
		<div class="ibox-content">


			          <table class="table table-bordered">
                            <thead>
                                <tr>
                                 <th>Pop点</th>
                                    <th>设备城市</th>
                                    <th>设备型号</th>
                                    <th>名称</th>
                                    <th>本地回环地址</th>
                                </tr>
                            </thead>
                            <tbody id="pe">
                            </tbody>
                        </table>

		</div>
	</div>
	


	<div class="ibox-content">
		<div class="ibox-title">
			<h4>Qos信息</h4>
		</div>
		<div class="ibox-content">

			<div class="row">
				<div class="col-sm-5">
					<dl class="dl-horizontal">
						<dt>InterNet(kb/s)：</dt>
						<dd id='qos_internet'></dd>
					</dl>
				</div>
				<div class="col-sm-7">
					<dl class="dl-horizontal">
						<dt>pop:(kb/s)：</dt>
						<dd id='qos_pop'></dd>
					</dl>
				</div>
			</div>

		</div>
	</div>



	<div class="ibox-content">
		<div class="ibox-title">
			<h4>WIFI信息</h4>
		</div>
		<div class="ibox-content">
	<div class="row">
				<div class="col-sm-5">
					<dl class="dl-horizontal">
						<dt id='wifiSsid1'></dt>
						<dd id='wifiBrandwidth1'></dd>
					</dl>
				</div>
				<div class="col-sm-7">
					<dl class="dl-horizontal">
						<dt id='wifiSsid2'></dt>
						<dd id='wifiBrandwidth2'></dd>
					</dl>
				</div>
			</div>

		</div>
	</div>





	<div class="row">
		<div class="col-sm-12">
			<div class="ibox">
				<div class="ibox-content">
					<div class="row">
						<div class="col-sm-4">
							<div class="panel panel-default">
								<div class="panel-heading">WAN信息</div>
								<div class="panel-body">
									<table class="table table-bordered">
										<thead>
											<tr>
												<th>名称</th>
												<th>IP</th>
												<th>类型</th>
												<th>协议</th>
												<th>其他</th>
											</tr>
										</thead>
										<tbody id='wan'>
											
										</tbody>
									</table>
								</div>

							</div>
						</div>
						<div class="col-sm-4">
							<div class="panel panel-primary">
								<div class="panel-heading">LAN信息</div>
								<div class="panel-body">
									<table class="table table-bordered">
										<thead>
											<tr>
												<th>地址池</th>
												<th>网关IP</th>
												<th>DHCP</th>
												<th>DNS</th>
											</tr>
										</thead>
										<tbody id='lan'>
										</tbody>
									</table>
								</div>
							</div>
						</div>
						<div class="col-sm-4">
							<div class="panel panel-success">
								<div class="panel-heading">业务路由</div>
								<div class="panel-body">
									<table class="table table-bordered">
										<thead>
											<tr>
												<th>业务类型</th>
												<th>网段</th>
												<th>下一跳地址</th>
											</tr>
										</thead>
										<tbody id='route'>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
	<div th:include="include :: footer"></div>

	<script th:inline="javascript">
		showWan();
		showLan();
		showRoute();
		showCpe();
		showPe();
		
		function showCpe() {
			$.ajax({
				type : "POST",
				cache : true,
				url : ctx + "module/cloudCpe/list",
				data : {
					"cpeId" : getQueryString("cpeId")
				},
				async : false,
				success : function(result) {
					 for(var i=0; i<result.rows.length; i++)  {
					     document.getElementById("qos_internet").innerHTML=result.rows[i].qosInternet;
                         document.getElementById("qos_pop").innerHTML= result.rows[i].qosPop;
                         document.getElementById("wifiSsid1").innerHTML= result.rows[i].wifiSsid1;
                         document.getElementById("wifiBrandwidth1").innerHTML= result.rows[i].wifiBrandwidth1;
                         document.getElementById("wifiSsid2").innerHTML= result.rows[i].wifiSsid2;
                         document.getElementById("wifiBrandwidth2").innerHTML= result.rows[i].wifiBrandwidth2;
                         
                         document.getElementById("sn").innerHTML=result.rows[i].sn;
                         document.getElementById("os").innerHTML= result.rows[i].os;
                         document.getElementById("model").innerHTML= result.rows[i].model;
                         document.getElementById("agentVersion").innerHTML= result.rows[i].agentVersion;
                         document.getElementById("onlineTime").innerHTML= result.rows[i].onlineTime;
                         document.getElementById("status").innerHTML= result.rows[i].status;
                         
			    	 }
					
				}
			});
		}

		function showWan() {
			$.ajax({
				type : "POST",
				cache : true,
				url : ctx + "module/wan/list",
				data : {
					"cpeId" : getQueryString("cpeId")
				},
				async : false,
				success : function(result) {
					var table ="";
			    	 for(var i=0; i<result.rows.length; i++)  {
			    		 table =table+
			    		"				<tr>\n" +
			    		"					<td>"+result.rows[i].wanName+"</td>" +
			    		"					<td>"+result.rows[i].ip+"</td>" +
			    		"					<td>"+result.rows[i].type+"</td>" +
			    		"					<td>"+result.rows[i].protocol+"</td>" +
			    		"					<td>"+result.rows[i].other+"</td>" +
			    		"				</tr>\n" ;
			    	 }
			    	document.getElementById("wan").innerHTML=table;
				}
			});
		}
		
		
		function showPe() {
			$.ajax({
				type : "POST",
				cache : true,
				url : ctx + "module/cloudPe/selectCloudPeListbyCPe",
				data : {
					"cpeId" : getQueryString("cpeId")
				},
				async : false,
				success : function(result) {
					var table ="";
			    	 for(var i=0; i<result.rows.length; i++)  {
			    		 table =table+
			    		"				<tr>\n" +
			    		"					<td>"+result.rows[i].pop+"</td>" +
			    		"					<td>"+result.rows[i].deviceCity+"</td>" +
			    		"					<td>"+result.rows[i].deviceModel+"</td>" +
			    		"					<td>"+result.rows[i].peName+"</td>" +
			    		"					<td>"+result.rows[i].ip+"</td>" +
			    		"				</tr>\n" ;
			    	 }
			    	document.getElementById("pe").innerHTML=table;
				}
			});
		}
		

		
		function showLan() {
			$.ajax({
				type : "POST",
				cache : true,
				url : ctx + "module/lan/list",
				data : {
					"cpeId" : getQueryString("cpeId")
				},
				async : false,
				success : function(result) {
					var table ="";
			    	 for(var i=0; i<result.rows.length; i++)  {
			    		 table =table+
			    		"				<tr>\n" +
			    		"					<td>"+result.rows[i].addPool+"</td>" +
			    		"					<td>"+result.rows[i].ip+"</td>" +
			    		"					<td>"+result.rows[i].dhcp+"</td>" +
			    		"					<td>"+result.rows[i].dns+"</td>" +
			    		"				</tr>\n" ;
			    	 }
			    	document.getElementById("lan").innerHTML=table;
				}
			});
		}
		

		

		function showRoute() {
			$.ajax({
				type : "POST",
				cache : true,
				url : ctx + "module/route/list",
				data : {
					"cpeId" : getQueryString("cpeId")
				},
				async : false,
				success : function(result) {
					var table ="";
			    	 for(var i=0; i<result.rows.length; i++)  {
			    		 table =table+
			    		"				<tr>\n" +
			    		"					<td>"+result.rows[i].type+"</td>" +
			    		"					<td>"+result.rows[i].segment+"</td>" +
			    		"					<td>"+result.rows[i].nextIp+"</td>" +
			    		"				</tr>\n" ;
			    	 }
			    	document.getElementById("route").innerHTML=table;
				}
			});
		}
		

		function getQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
			var r = window.location.search.substr(1).match(reg);
			if (r != null)
				return unescape(r[2]);
			return null;
		}
	</script>

	<!-- 全局js -->
	<script src="js/jquery.min.js?v=2.1.4"></script>
	<script src="js/bootstrap.min.js?v=3.3.6"></script>



	<!-- 自定义js -->
	<script src="js/content.js?v=1.0.0"></script>


</body>
</html>










